@import './Suggestion';
@import './toggles/Toggles.scss';

.query-input2 {
    flex: 1 1 auto;
    position: relative;

    // The width of the toggle icons in the query input.
    $toggle-icon-width: 24px;

    &__input {
        // Right side is flush with SearchButton.
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        // Padding added so that the input value does not overlap with the toggle buttons.
        // The padding should be calculated by the width of an icon width * number of icons + 0. 5rem.
        padding-right: calc(#{$toggle-icon-width} * 4 + 0.5rem);

        &--with-mode-toggle {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    &__suggestions {
        position: absolute;
        width: 100%;
        z-index: 1;
        max-height: 25rem;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-y: overlay;
        background-color: #1c2736;
        border: solid 1px #1b548a;
        border-top: none;
        padding: 0;

        .theme-light & {
            background-color: $color-light-bg-2;
            border-top: none;
        }

        // Custom scrollbar
        &::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #2a3a51;
        }

        .theme-light &::-webkit-scrollbar-thumb {
            background-color: $color-light-bg-3;
        }
    }

    &__loading-notifier {
        position: absolute;
        z-index: 1;
        right: 0.5rem;
        padding-left: 0.25rem;
        bottom: 0.375rem;
        background-color: $color-bg-4;
    }

    &__toggle-container {
        position: absolute;
        right: 0.375rem;
        top: 0.375rem;
    }
}

.theme-light {
    .query-input2 {
        background-color: $color-light-bg-1;
        &__loading-notifier {
            background-color: $color-light-bg-1;
        }
    }
}
